<template>
  <div class="">
    <div class="Back-ac"></div>
    <!-- 组件1  搜索 -->
    <MySearch @parentsearch="parentSearch" />
    <!-- 组件2  表格 -->
    <MyTable :myarr="arr" @resetTable="initHome" />
    <!-- 组件3  分页组件 -->
    <MyPage />
    <!-- 组件4 -->
    <Myaggregation />
    <!-- 组件5 -->
<div class="mye-xrt"> <MyExternal /></div>
    <!-- 组件6 -->
    <Myquality />
  </div>
</template>

<script>
import MySearch from "./components/MySearch.vue";
import MyTable from "./components/MyTable.vue";
import MyPage from "./components/MyPage.vue";

import Myaggregation from "./components/Myaggregation.vue";
import MyExternal from "./components/MyExternal.vue";
import Myquality from "./components/Myquality.vue";
import { getHomeApi } from "../../api/homeApi";
export default {
  components: {
    MySearch,
    MyTable,
    MyPage,
    Myaggregation,
    MyExternal,
    Myquality,
  },
  data() {
    return {
      arr: [],
      keyword: "", //搜索关键词
      page: 1, //默认当前页 是第一页
      pageSize: 20, //默认每页显示20条
      total: 0, //总条数
    };
  },
  mounted() {
    // 发送我们的请求，数组是共享数据，我们要把写在父组件中。
    this.initHome();
  },
  methods: {
    parentpagesize(val) {
      //切换pagesize事件
      this.pageSize = val;
      this.page = 1;
      this.initHome();
    },
    parentpage(val) {
      //切换页码事件
      this.page = val;
      this.initHome();
    },
    parentSearch(val) {
      //子组件触发父组件 传参   {\"name\":123}
      this.keyword = val;
      this.initHome();
    },
    // 首屏查询接口，一般跟搜索是共用一个接口的
    // 首屏查询接口，一般跟我们分页器也是绑定的关系  我们只需要加俩字段就可以
    // 支持分页  page当前页 pageSize一页多少条
    initHome() {
      var params = {
        keyword: this.keyword,
        page: this.page,
        pageSize: this.pageSize,
      };
      getHomeApi(params).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.arr = res.data;
          this.total = res.total;
        }
      });
    },
  },
};
</script>

<style scoped>
::v-deep .el-header {
  position: relative;
  padding: 0;
}

.Back-ac {
  width: 100%;
  height: 343px;
  position: absolute;
  /* position: fixed;*/
  top: 0;
  left: 0; 
  overflow: hidden;
  /* z-index: -1; */
  background: url("../../img/shouye/组 267.png") repeat-x;
  background-size: 100% 100%;
}
.mye-xrt{
  width: 100%;
  height: 100%;
  background-color: #fff;
}

</style>
